<template>
    <div>
        <div v-if="cart.length === 0">
            <van-empty description="购物车空空如也">
                <van-button round type="danger" to="goods">前往商品列表</van-button>
            </van-empty>
        </div>
        
        <div v-else>
            <van-list>
                <van-swipe-cell v-for="item in cart" :key="item.id">
                    <van-card
                        :price="item.price"
                        :desc="item.desc"
                        :title="item.prodName"
                        :thumb="item.thumb"
                        :num="item.quantity"
                    >
                        <template #num>
                            <van-stepper
                                v-model="item.quantity"
                                theme="round"
                                button-size="22"
                                disable-input
                                @change="updateProdQuantity(item)"
                            />
                        </template>
                    </van-card>
                    <van-divider
                        :style="{ margin: '5px', padding: '0 16px' }"
                    />
                    <template #right>
                        <van-button
                            square
                            text="删除"
                            type="danger"
                            class="delete-button"
                            @click="removeProd(item.id)"
                        />
                    </template>
                </van-swipe-cell>
            </van-list>
            <van-submit-bar :price="getProdSum" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checked">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    data() {
        return {
            checked: true,
            orderList: [],
        };
    },
    computed: {
        ...mapState(["cart"]),
        ...mapGetters(["getProdSum"]),
    },
    mounted() {
        this.loadCartStatus();
    },
    methods: {
        ...mapActions(["addProdToCart", "loadCartStatus", "removeProd"]),
        ...mapMutations(["updateProdQuantity"]),
        onSubmit() {
            this.$toast('您的余额不足，先努力上班吧');
        },
        onClickEditAddress() {},
    },
};
</script>

<style scoped>
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}
</style>
